import *as echarts from 'echarts'
let arrId = []
export const getId = (id, option) => {

    let initId = echarts.init(document.getElementById(id))

    if (arrId.indexOf(id) == -1) {
        arrId.push(initId)
    }
    initId.setOption(option)
    setTimeout(() => {
        window.onresize = function () {
            arrId.forEach(item => {
                item.resize()
            })
        }
    }, 200);
}

export function aa(id) {
    let option;

    option = {
        title: {
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
        },
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
        dataset: {
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                { product: 'Matcha ', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                { product: 'Milk ', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                { product: 'Cheese ', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                { product: 'Walnut ', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
              ]
        },
    };
    getId(id, option)
}

export function bb(id,dataset) {
    let option;

    option = {
        legend: {},
        tooltip: {},
        dataset:dataset,
        xAxis: { type: 'category',
        name:"城市",
    },
        yAxis: {
            name:"人口",
            type:"value",
            show:true
        },
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };


    getId(id, option)
}

export function cc(id) {
    let option;

    option = {
        series: [
            {
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                center:["50%","60%"],
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -30,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: '#fff',
                        width: 4
                    }
                },
                axisLabel: {
                    color: 'auto',
                    distance: 40,
                    fontSize: 20
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} km/h',
                    color: 'auto'
                },
                data: [
                    {
                        value: 70
                    }
                ]
            }
        ]
    };

    getId(id, option)
}


